<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="relax.css">
	<title>RelaxCSS : A mini CSS library</title>

</head>
<style type="text/css">
	@font-face
	{
		font-family: "nuni";
		src:url('fonts/nuni.ttf');
	}
	body
	{
		 font-family: "nuni";
	}
	pre
	{ 
		font-family: "consolas" ,"menlo" ,"source code pro","ubuntu mono" ,"roboto mono","inconsolata",monospace;
	}
	aside
	{
		top:4em;
		max-width: 600px; 
	}
	ul
	{
		list-style-type: none; 
		padding: 0px; 
	}
	aside a
	{
		color:#777;
		text-decoration: none ;
		font-size: 1.5em;   
	}
	aside a:hover
	{
		color:#111;
	}
	aside li
	{
		padding: 0.8em;
		font-size: 0.9em; 
	}
	li ul
	{
		display: flex !important;
		width: 70vw; 
	}
</style>
<body onload="encodePreElements()">
	<nav class='nav sb sticky-top '>
		<a class='nav-brand ' href="index.html">RelaxCSS</a>
		<ul class='nav-sa'>
			<li><a href="index.html">Home</a></li>
			<li><a href="classes.html">Classes</a></li>
			<li><a href="https://github.com/Ziyadsk/relaxCSS">Github</a></li>
		</ul>
	</nav>

	<div class="global-container w-3 center">
		<h1 class='text-large'>Classes</h1>
			<aside>
		<ul>
			<li><a href="#Colors">Colors</a>
				<ul>
					<li title="makes the text color green">.c-green</li>
					<li title="makes the text color red">.c-red</li>
					<li title="makes the text color blue">.c-blue</li>
					<li title="makes the text color blue ">.c-white</li>
					<li title="makes the text color black">.c-black</li>
	                <li title="makes the text color yellow">.c-yellow</li>
				</ul>
			</li>

			<li><a href="#BacgroundColors">Backgound colors</a>
				<ul>
					<li title="turns the backgound color green">.bg-green</li>
					<li title="turns the backgound color red">.bg-red</li>
					<li title="turns the backgound color blue">.bg-blue</li>
					<li title="turns the backgound color white">.bg-white</li>
					<li title="turns the backgound color black">.bg-black</li>
	                <li title="turns the backgound color yellow">.bg-yellow</li>
				</ul>
			</li>
			<li><a href="#Buttons">Buttons</a>
				<ul>
					<li>.btn</li>
					<li>.btn-1</li>
					<li>.btn-2</li>
					<li>.btn-3</li>
					<li>.btn-4</li>
	                <li>.btn-5</li>
	                <li>.btn-6</li>
	                <li>.btn-success</li>
	                <li>.btn-warning</li>
	                <li>.btn-danger</li>
				</ul>
			</li>
			<li><a href="#Badges">Badges</a>
				<ul>
				<li> .b-black"</li>
				<li>.b-blue</li>
				<li>.b-green"</li>
				<li>.b-red</li>
				<li>b-yellow</li>
				<li >b-silver</li>
			</ul>
			</li>
			</li>
			<li><a href="#ButtonSizes">Buttons sizes</a>
				<ul>
	                <li title="Small sized button">.btn-small</li>
	                <li title="Medium sized button">.btn-medium</li>
	                <li title="Large sized button">.btn-large</li>
				</ul>
			</li>
			<li><a href="#TextSizes">Text sizes</a>
				<ul>
	                <li>.text-small</li>
	                <li>.text-medium</li>
	                <li>.text-large</li>
	                <li>.text-huge</li>
				</ul>
			</li>
			<li><a href="#Borders">Borders</a>
				<ul>
	                <li>.border</li>
	                <li>.border-1</li>
	                <li>.border-2</li>
	                <li>.border-3</li>
				</ul>
				</li>
			<li><a href="#Rounded">Rounded Elements</a>
				<ul>
	                <li>.rounded</li>
	                <li>.rounded-1</li>
	                <li>.rounded-2</li>
	                <li>.rounded-3</li>
				</ul>
				</li>
			<li><a href="#Shadows">Shadows</a>
					<ul>
	                <li>.shadow</li>
	                <li>.shadow-1</li>
	                <li>.shadow-2</li>
	                <li>.shadow-3</li>
				</ul>
			</li>
			<li><a href="#Header">Header/nav</a>
					<ul>
					<li>.nav</li>
	                <li>.nav-brand</li>
	                <li>.sb (space between elements)</li>
	                <li>.sa (space around elements)</li>
	                <li>.nav-center</li>
	                <li>.nav-end (group element at the right)</li>
	                <li>.fixed-top</li>
	                <li>.sticky-top</li>
	            </ul>
			</li>
			<li><a href="#FontWeight">Font weight / Underlined</a>
				<ul>
				<li>.text-light</li>
				<li>.text-bold</li>
				<li>.underlined</li>	
	            </ul>
			</li>
			<li><a href="#Opacity">Opacity </a>
				<ul>
				<li>.opac</li>
				<li>.opac-1</li>
				<li>.opac-2</li>	
	            </ul>
			</li>
			<li><a href="#TextContainers">Text containers</a>
				<ul>
					<li>.text-container</li>
				</ul>
			</li>
			<li><a href="#StackedCentered">Stack/Center elements</a>
				<ul>
					<li>.stacked</li>
					<li>.stacked-center</li>
					<li>.text-center</li>
					<li>.center-children</li>
					<li>.center</li>
				</ul>
			</li>
			<li><a href="#Margins">Margins</a>
				<ul>
					<li>.m-* (margin)</li>
					<li>.mr-* (margin-right)</li>
					<li>.ml-* (margin-left)</li>
					<li>.mb-* (margin-bottom)</li>
					<li>.mt-* (margin-top)</li>
				</ul>
				<li>*(levels (1,2,3)) example: ml-2 or m-1 </li>
			</li>
			<li><a href="#Paddings">Paddings</a>
				<ul>
					<li>.p-* (padding)</li>
					<li>.pr-* (padding-right)</li>
					<li>.pl-* (padding-left)</li>
					<li>.pb-* (padding-bottom)</li>
					<li>.pt-* (padding-top)</li>
				</ul>
				<li>*(levels (1,2,3)) example: pl-2 or p-1 </li>
			</li>
			<li><a href="#Width">Width</a>
				<ul>
					<li title="width 1: takes 25% of the container">.w-1</li>
					<li title="width 2: takes 50% of the container">.w-2</li>
					<li title="width 3: takes 75% of the container">.w-3</li>
					<li title="width max: take full width of the container">.w-max</li>
				</ul>
			</li>
			<li><a href="#LightDark">Light/Dark</a>
				<ul>
					<li>.light</li>
					<li>.dark</li>
				</ul>
			</li>
			<li><a href="#Tables">Tables</a>
				<ul>
					<li>.tab</li>
				</ul>
			</li>
			<li><a href="#Forms">Forms</a>
				<ul>
					<li>.r-form</li>
					<li>.input-text</li>
				</ul>
			</li>
			<li><a href="#Cards">Cards</a>
				<ul>
					<li>.r-card</li>
					<li>.btn-group</li>
				</ul>
			</li>
		</ul>
	</aside>
		<hr>
	</div>
	
